<template>
	<div>
		<div class="uw-bg-white uw-pt-10 uw-mb-10 uw-pl-12">
			<uw-form :data="formData" @submit="serachSubmit">
				<uw-form-item :data="formData"></uw-form-item>
			</uw-form>
		</div>
		<el-button class="uw-mb-10" type="primary" @click="showModel=true">新增文章</el-button>
		<uw-table :tableConfig="tableConfig">
			<template #button="{data,row}">
				<el-button v-for="item in data" :type="item.type"
					@click="handleButton(item,row)">{{item.label}}</el-button>
			</template>
		</uw-table>
		<uw-pagination :total="totalCount" @currentChange="currentChange" />
		<uw-dialog :title="editId ? '编辑文章' : '添加文章'" width="893px" v-model="showModel">
			<template #default>
				<uw-form ref="addFromRef" :show-btn="false" :data="addFrom">
					<uw-form-item :data="addFrom"></uw-form-item>
				</uw-form>
			</template>
			<template #footer>
				<el-button @click="showModel=false">取消</el-button>
				<el-button type="primary" @click="onSubmit">确定</el-button>
			</template>
		</uw-dialog>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive } from 'vue';
	import { ElMessage, ElMessageBox } from 'element-plus';
	import { getArticlesApi, getCategoriesApi, createArticleApi , deleteArticleApi , updateArticleApi } from '@/api/article';//接口
	import { Article, ArticleCategory, addFormData, tableConfigData, buttonData , formDataData} from '@/api/article'; // 接口字段定义
	const showModel = ref(false)
	const addFromRef = ref()
	const addFrom = reactive(addFormData)
	const formData = reactive(formDataData)
	const tableConfig = reactive(tableConfigData)
	const totalCount = ref(0)
	const currentPage = ref(1)
	const editId = ref(0)
	const formInline = reactive({})
	const currentChange = (index:number) => {
		currentPage.value = index
		getArticles()
	}
	const getArticles = async () => {
		getArticlesApi({
			page: currentPage.value,
			pageSize: 10,
			...formInline
		}).then(({ data: { list, total } } : { data : { list : Array<Article>, total : number } }) => {
			tableConfig.data = list
			totalCount.value = total
		})
	}
	/**
	 * 搜索提交
	 */
	const serachSubmit = (data : any) => {
		Object.assign(formInline,data)
		currentPage.value = 1
		getArticles()
	}
	/**
	 * 操作按钮 
	 */
	const handleButton = (row : buttonData, data:Article) => {
		switch (row.value) {
			case 'edit':
					editId.value = data.id
					Object.keys(data).forEach((key)=>{
						if(addFrom.fields.find((item)=>item.name===key)){
							addFrom.fields.find((item)=>item.name===key).value = data[key]
						}
					})
					showModel.value = true
				break;
			case 'delete':
				ElMessageBox.confirm('确定要删除吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(() => {
					deleteArticleApi(data.id).then(() => {
						ElMessage.success('删除成功')
						getArticles()
					}).catch(() => { })
				}).catch(() => { })
				break;

			default:
				break;
		}
	}
	/**
	 * 添加文章或者编辑文章
	 */
	const onSubmit = () => {
		const data = addFromRef.value.submit()
		if(editId.value){
			updateArticleApi(editId.value,data).then(() => {
				ElMessage.success('编辑成功')
				showModel.value = false
				getArticles()
			}).catch((err) => {
				console.log(err);
			})
		}else{
			createArticleApi(data).then(() => {
				ElMessage.success('添加成功')
				showModel.value = false
				getArticles()
			}).catch((err) => {
				console.log(err);
			})
		}
	}
	onMounted(() => {
		getCategoriesApi().then((res) => {
			addFrom.fields[1].options = res.data.map((item : ArticleCategory) => {
				return {
					label: item.name,
					value: item.id
				}
			})
			formData.fields[1].options = res.data.map((item : ArticleCategory) => {
				return {
					label: item.name,
					value: item.id
				}
			})
		})
		getArticles()
	})
</script>

<style scoped>

</style>